import React from 'react'
import PropTypes from 'prop-types'
import { View, Text, StyleSheet } from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import CustomButton from 'src/components/button/CustomButton'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import CustomImage from 'src/components/image/CustomImage'

export default function OpenBtnRound (props) {
  return (
    <CustomButton style={[styles.bottomBtn, props.style]} onPress={props.onClick}>
      <Text style={styles.bottomTxt}>立即升级</Text>
      <LinearGradient
        start={{ x: 0, y: 0 }}
        end={{ x: 0, y: 1 }}
        colors={['#DACFB5', '#B3A17E']}
        style={styles.bottomLinear}>
        <Text style={styles.discount}>限时5折</Text>
        <View style={styles.bottomTriangle}/>
      </LinearGradient>
      <CustomImage style={styles.icon} source={require('@/imgC/member/open_btn_icon.png')}/>
    </CustomButton>
  )
}
OpenBtnRound.propTypes = {
  style: PropTypes.object,
  onClick: PropTypes.func
}
const styles = StyleSheet.create({
  bottomBtn: {
    width: ScaleS(300),
    height: ScaleS(58),
    backgroundColor: '#444444',
    borderRadius: ScaleS(28),
    justifyContent: 'center',
    alignItems: 'center'
  },
  bottomTxt: {
    fontSize: ScaleT(20),
    fontWeight: '500',
    color: '#FFFFFF'
  },
  bottomLinear: {
    position: 'absolute',
    top: 0,
    left: ScaleS(37),
    width: ScaleS(52),
    height: ScaleS(35),
    alignItems: 'center'
  },
  discount: {
    marginTop: ScaleS(6),
    fontSize: ScaleT(11),
    fontWeight: '500',
    color: '#444444'
  },
  bottomTriangle: {
    position: 'absolute',
    left: 0,
    bottom: 0,
    borderStyle: 'solid',
    borderLeftColor: 'transparent',
    borderLeftWidth: ScaleS(26),
    borderRightColor: 'transparent',
    borderRightWidth: ScaleS(26),
    borderBottomColor: '#444444',
    borderBottomWidth: ScaleS(8)
  },
  icon: {
    position: 'absolute',
    right: 0,
    bottom: 0
  }
})
